<template>
	<view>
		<!-- 帮买 -->
		<template v-if="orderType == 4">
			<view class="white u-m-20 round u-p-20">
				<text class="u-font-40 u-light-color ">填写您想代购的商品</text>
				<textarea maxlength="200" placeholder="请填写想代购的商品名称,商品信息,规格,数量,如星巴克的美式咖啡,一杯,中式,热的,少糖。" 
				class="u-p-20 u-m-t-20 txt_back round" :value="helpbuy"></textarea>
				<view>
					<u-form>
						<u-form-item label="备注">
							<u-input type="text" placeholder="还有什么要交代骑手的" />
						</u-form-item>
					</u-form>

				</view>
			</view>
		</template>
		<!-- 服务到家订单 -->
		<template v-if="orderType==3">
			<view class="u-m-20 white u-p-20 round ">
				<view class="u-m-t-30 u-m-b-20">
					<u-row>
						<u-col span="4">
							<view class="setup">
								<u-image src="../../static/image/images/coupon-expired.png" width="160" height="160">
								</u-image>
							</view>
						</u-col>
						<u-col span="8">
							<view class="u-font-35">{{text}}</view>
							<view class="u-font-28 u-light-color">{{name}}-{{name1}}</view>
						</u-col>
					</u-row>
				</view>
				<view style="border-top:1rpx solid #82848A;">
					<u-form>
						<u-form-item label="备注">
							<u-input type="text" placeholder="还有什么要交代闪哥的" />
						</u-form-item>
					</u-form>
				</view>
			</view>
		</template>
		<!-- 帮排队、闪帮 -->
		<template v-if="orderType == 1 || orderType == 2">
			<view class="u-m-20 white u-p-20 round">
				<text class="u-font-40 u-light-color">{{txt}}</text>
				<textarea maxlength="200" :placeholder="placehold" 
				class="u-p-20 u-m-t-20 txt_back round"></textarea>
			</view>
		</template>

		<!-- 时间选择 -->
		<view class="white u-m-20 round" >
			<template>
				<!-- 购买地址 -->
				<view class="u-p-20" v-if="orderType == 4">
					<text>购买地点</text>
					<u-radio-group v-model="value" @change="radioGroupChange" class="u-m-l-60">
						<u-radio @change="radioChange" icon-size="20" label-size="30"
						v-for="(item, index) in chooes" :key="index" 
						:name="item.name" :disabled="item.disabled">
							{{item.name}}
						</u-radio>
					</u-radio-group>
					<view class="u-text-center u-m-20">
						{{buy}}
					</view>
				</view>
				
				<view class="">
					<!-- 选择时间 -->
					<u-select v-model="show" :list="list" mode="mutil-column" @confirm="confirm" @cancel="cancel">
					</u-select>
					<u-cell-item :title="business[orderType-1].title" :arrow="true" @click="show = true"
						:value="this.business[orderType-1].date">
					</u-cell-item>
				</view>
				<!-- 排队时长 -->
				<view class="" v-if="orderType == 2">
					<u-select v-model="show_1" mode="single-column" :list="times" @confirm="confirm1" @cancel="cancel">
					</u-select>
					<u-cell-item title="排队时长" :arrow="true" :value="result" @click="show_1 = true">
					</u-cell-item>
				</view>
				<!-- 预计费用(帮买) -->
				<view class="u-p-t-20" v-if="orderType == 4">
					<u-row>
						<u-col span="3">预计费用</u-col>
						<u-col span="5" class="u-light-color u-font-28">请与骑手当面结算</u-col>
						<u-col span="4">
							<u-input placeholder="不超过1000元" type="number" input-align="right" :maxlength="3"></u-input>
						</u-col>
					</u-row>
				</view>
				<!-- 优惠劵 -->
				<view class="">
					<u-cell-item title="优惠劵" :arrow="true" @click="jump('/pages/user/coupon')" value="无可用的优惠劵">
					</u-cell-item>
				</view>
			</template>
		</view>
	</view>
</template>

<script>
	export default {
		name: "submitOrder",
		//orderType为1是闪帮、2是帮排队、3是服务到家、4是帮买
		props: ['orderType', 'name', 'name1', 'text','helpbuy'],
		data() {
			return {
				txt: '',
				result: '30分钟',
				placehold: '',
				show: false,
				show_1: false,
				list: [
					[{
							value: '1',
							label: '今天'
						},
						{
							value: '2',
							label: '明天'
						}
					],
					[{
							value: '3',
							label: '0'
						},
						{
							value: '4',
							label: '1'
						},
						{
							value: '5',
							label: '2'
						},
						{
							value: '6',
							label: '3'
						},
						{
							value: '7',
							label: '4'
						},
						{
							value: '8',
							label: '5'
						},
						{
							value: '9',
							label: '6'
						},
						{
							value: '10',
							label: '7'
						},
						{
							value: '11',
							label: '8'
						},
						{
							value: '12',
							label: '9'
						},
						{
							value: '13',
							label: '10'
						}, {
							value: '14',
							label: '11'
						}, {
							value: '15',
							label: '12'
						}, {
							value: '16',
							label: '13'
						}, {
							value: '17',
							label: '14'
						}, {
							value: '18',
							label: '15'
						}, {
							value: '19',
							label: '16'
						}, {
							value: '20',
							label: '17'
						}, {
							value: '21',
							label: '18'
						}, {
							value: '22',
							label: '19'
						}, {
							value: '23',
							label: '20'
						}, {
							value: '24',
							label: '21'
						}, {
							value: '25',
							label: '22'
						}, {
							value: '26',
							label: '23'
						}
					],
					[{
							value: '27',
							label: '00'
						},
						{
							value: '28',
							label: '10'
						},
						{
							value: '29',
							label: '20'
						},
						{
							value: '30',
							label: '30'
						},
						{
							value: '31',
							label: '40'
						},
						{
							value: '32',
							label: '50'
						}
					],
				],
				business: [{
					title: '闪帮时间',
					date: '立即前往'
				}, {
					title: '排队时间',
					date: '立即排队'
				}, {
					title: '预约时间',
					date: '尽快到达'
				},{
					title: '送达时间',
					date: '立即送达'
				}],
				times: [{
					value: '1',
					label: '30分钟'
				}, {
					value: '2',
					label: '60分钟'
				}, {
					value: '3',
					label: '90分钟'
				}, {
					value: '4',
					label: '120分钟'
				}, {
					value: '5',
					label: '150分钟'
				}],
				chooes: [{
					name: "指定地点",
					disabled: false
				}, {
					name: "就近购买",
					disabled: false
				}],
				value:"指定地点",
				buy:"选择购买地址"
			};
		},

		created() {
			console.log(this.orderType);
			if (this.orderType == 1) {
				this.txt = '请填写您想要帮的事';
				this.placehold = '只要说明您的需要,我们随叫随到。';
			} else if (this.orderType == 2) {
				this.txt = '填写您想要排队的内容';
				this.placehold = '无论是买票，站队，办业务，填写排队需求全部能搞定。';
			}
		},
		methods: {
			confirm(e) {
				this.business[this.orderType - 1].date = '';
				e.map((val, index) => {
					this.business[this.orderType - 1].date += this.business[this.orderType - 1].date == '' ? val
						.label : '-' + val.label;
				})

			},
			confirm1(e) {
				this.result = '';
				e.map((val, index) => {
					this.result = val.label;
				})
			},
			cancel(e) {
				console.log(e);
			},
			// 选中某个单选框时，由radio时触发
			radioChange(e) {
				// console.log(e);
			},
			// 选中任一radio时，由radio-group触发
			radioGroupChange(e) {
				// console.log(e);
			}
		},

	}
</script>

<style scoped lang="scss">
	.back {
		background-color: #2a5aa4;
		color: #FFFFFF;
	}

	.float {
		float: right;
		margin: 10rpx auto;
	}

	.white {
		background-color: #FFFFFF;
	}

	.txt_back {
		background-color: #f5f5f5;
	}

	.round {
		border-radius: 10rpx;
	}

	.setup {
		border: 1rpx solid #000000;
		width: 160rpx;
		height: 160rpx;
		border-radius: 12rpx;
	}
</style>
